<!--
<script setup>

</script>

<template>
出勤汇总
</template>

<style scoped>

</style>-->
<!--
<script setup>
import { ref, computed } from 'vue';
import { ElSelect, ElOption, ElButton, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElDatePicker } from 'element-plus';

const searchQuery = ref('');
const searchDate = ref('');
const searchStatus = ref('all');
const searchDepartment = ref('all');
const searchType = ref('all');

const data = ref([
  { name: "张三", date: "2023-05-01", status: "present", department: "tech", type: "full-time" },
  { name: "李四", date: "2024-05-02", status: "absent", department: "hr", type: "contractor" },
  { name: "赵四", date: "2000-05-02", status: "present", department: "hr", type: "contractor" },
  { name: "王五", date: "2001-05-02", status: "absent", department: "tech", type: "full-time" },
  { name: "李华", date: "2022-05-02", status: "present", department: "tech", type: "contractor" },
  { name: "小明", date: "2023-05-02", status: "absent", department: "hr", type: "full-time" },
  { name: "小张", date: "2023-05-02", status: "present", department: "tech", type: "full-time" },
  { name: "小李", date: "2023-05-02", status: "present", department: "hr", type: "contractor" },
  { name: "花花", date: "2012-05-02", status: "absent", department: "tech", type: "full-time" },
  { name: "晓晓", date: "2023-05-02", status: "present", department: "hr", type: "full-time" },
  { name: "小昭", date: "2016-05-02", status: "absent", department: "tech", type: "contractor" },
  { name: "aa", date: "2019-05-02", status: "present", department: "hr", type: "full-time" },
  { name: "bb", date: "2008-08-02", status: "absent", department: "tech", type: "contractor" },
  { name: "cc", date: "2008-06-12", status: "absent", department: "tech", type: "contractor" },
]);

const statuses = ref([
  { label: '在勤', value: 'present' },
  { label: '缺席', value: 'absent' },
  // 从数据字典加载更多状态
]);

const departments = ref([
  { label: '技术部', value: 'tech' },
  { label: '人事部', value: 'hr' },
  // 从数据字典加载更多部门
]);

const types = ref([
  { label: '正式员工', value: 'full-time' },
  { label: '合同工', value: 'contractor' },
  // 从数据字典加载更多类型
]);

const filteredData = computed(() => {
  return data.value.filter(item => {
    return (searchQuery.value ? item.name.includes(searchQuery.value) : true)
        && (searchDate.value ? item.date === searchDate.value : true)
        && (searchStatus.value !== 'all' ? item.status === searchStatus.value : true)
        && (searchDepartment.value !== 'all' ? item.department === searchDepartment.value : true)
        && (searchType.value !== 'all' ? item.type === searchType.value : true);
  });
});

const fetchData = async () => {
  // 调用API获取数据
  console.log('查询条件:', { searchQuery: searchQuery.value, searchDate: searchDate.value, searchStatus: searchStatus.value, searchDepartment: searchDepartment.value, searchType: searchType.value });
};
</script>
<template>
  <div class="attendance-summary">
    <el-form inline>
      <el-form-item label="姓名">
        <el-input v-model="searchQuery" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker v-model="searchDate" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchStatus" placeholder="请选择状态" style="width: 80px">
          <el-option label="全部" value="all"></el-option>
          <el-option v-for="status in statuses" :key="status.value" :label="status.label" :value="status.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门">
        <el-select v-model="searchDepartment" placeholder="请选择部门"  style="width: 90px">
          <el-option label="全部" value="all"></el-option>
          <el-option v-for="department in departments" :key="department.value" :label="department.label" :value="department.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="人员类型">
        <el-select v-model="searchType" placeholder="请选择人员类型"  style="width: 130px">
          <el-option label="全部" value="all"></el-option>
          <el-option v-for="type in types" :key="type.value" :label="type.label" :value="type.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="filteredData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column prop="department" label="部门"></el-table-column>
      <el-table-column prop="type" label="人员类型"></el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
/*
.attendance-summary {
  padding: 20px;
}

.el-form-item {
  margin-bottom: 1em;
}

.el-table {
  margin-top: 20px;
}
.el-form {
  display: flex;
  flex-wrap: wrap; !* 弹性布局，允许换行 *!
  gap: 20px; !* 元素间距 *!
}
*/
.attendance-summary {
  padding: 20px;
}

.el-form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust based on the number of items per row */
  gap: 10px;
}

.grid-item {
  grid-column: span 1; /* Make this item span one grid cell */
}

</style>-->
<!--
<script setup>

</script>

<template>
出勤汇总
</template>

<style scoped>

</style>-->
<!--
<script setup>
import { ref, computed } from 'vue';
import { ElSelect, ElOption, ElButton, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElDatePicker } from 'element-plus';

const searchQuery = ref('');
const searchDate = ref('');
const searchStatus = ref('all');
const searchDepartment = ref('all');
const searchType = ref('all');

const data = ref([
  { name: "张三", date: "2023-05-01", status: "present", department: "tech", type: "full-time" },
  { name: "李四", date: "2024-05-02", status: "absent", department: "hr", type: "contractor" },
  { name: "赵四", date: "2000-05-02", status: "present", department: "hr", type: "contractor" },
  { name: "王五", date: "2001-05-02", status: "absent", department: "tech", type: "full-time" },
  { name: "李华", date: "2022-05-02", status: "present", department: "tech", type: "contractor" },
  { name: "小明", date: "2023-05-02", status: "absent", department: "hr", type: "full-time" },
  { name: "小张", date: "2023-05-02", status: "present", department: "tech", type: "full-time" },
  { name: "小李", date: "2023-05-02", status: "present", department: "hr", type: "contractor" },
  { name: "花花", date: "2012-05-02", status: "absent", department: "tech", type: "full-time" },
  { name: "晓晓", date: "2023-05-02", status: "present", department: "hr", type: "full-time" },
  { name: "小昭", date: "2016-05-02", status: "absent", department: "tech", type: "contractor" },
  { name: "aa", date: "2019-05-02", status: "present", department: "hr", type: "full-time" },
  { name: "bb", date: "2008-08-02", status: "absent", department: "tech", type: "contractor" },
  { name: "cc", date: "2008-06-12", status: "absent", department: "tech", type: "contractor" },
]);

const statuses = ref([
  { label: '在勤', value: 'present' },
  { label: '缺席', value: 'absent' },
  // 从数据字典加载更多状态
]);

const departments = ref([
  { label: '技术部', value: 'tech' },
  { label: '人事部', value: 'hr' },
  // 从数据字典加载更多部门
]);

const types = ref([
  { label: '正式员工', value: 'full-time' },
  { label: '合同工', value: 'contractor' },
  // 从数据字典加载更多类型
]);

const filteredData = computed(() => {
  return data.value.filter(item => {
    return (searchQuery.value ? item.name.includes(searchQuery.value) : true)
        && (searchDate.value ? item.date === searchDate.value : true)
        && (searchStatus.value !== 'all' ? item.status === searchStatus.value : true)
        && (searchDepartment.value !== 'all' ? item.department === searchDepartment.value : true)
        && (searchType.value !== 'all' ? item.type === searchType.value : true);
  });
});

const fetchData = async () => {
  // 调用API获取数据
  console.log('查询条件:', { searchQuery: searchQuery.value, searchDate: searchDate.value, searchStatus: searchStatus.value, searchDepartment: searchDepartment.value, searchType: searchType.value });
};
</script>
<template>
  <div class="attendance-summary">
    <el-form inline>
      <el-form-item label="姓名">
        <el-input v-model="searchQuery" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker v-model="searchDate" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchStatus" placeholder="请选择状态" style="width: 80px">
          <el-option label="全部" value="all"></el-option>
          <el-option v-for="status in statuses" :key="status.value" :label="status.label" :value="status.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门">
        <el-select v-model="searchDepartment" placeholder="请选择部门"  style="width: 90px">
          <el-option label="全部" value="all"></el-option>
          <el-option v-for="department in departments" :key="department.value" :label="department.label" :value="department.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="人员类型">
        <el-select v-model="searchType" placeholder="请选择人员类型"  style="width: 130px">
          <el-option label="全部" value="all"></el-option>
          <el-option v-for="type in types" :key="type.value" :label="type.label" :value="type.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="filteredData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column prop="department" label="部门"></el-table-column>
      <el-table-column prop="type" label="人员类型"></el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
/*
.attendance-summary {
  padding: 20px;
}

.el-form-item {
  margin-bottom: 1em;
}

.el-table {
  margin-top: 20px;
}
.el-form {
  display: flex;
  flex-wrap: wrap; !* 弹性布局，允许换行 *!
  gap: 20px; !* 元素间距 *!
}
*/
.attendance-summary {
  padding: 20px;
}

.el-form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust based on the number of items per row */
  gap: 10px;
}

.grid-item {
  grid-column: span 1; /* Make this item span one grid cell */
}

</style>-->
<script setup>
import { ref, computed } from 'vue';
import * as XLSX from 'xlsx';
import { ElSelect, ElOption, ElButton, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElDatePicker } from 'element-plus';

const data = ref([
  { name: "张三", date: "2023-05-01", status: "present", department: "tech", type: "full-time" },
  { name: "李四", date: "2024-05-02", status: "absent", department: "hr", type: "contractor" },
  { name: "赵四", date: "2000-05-02", status: "present", department: "hr", type: "contractor" },
  { name: "王五", date: "2001-05-02", status: "absent", department: "tech", type: "full-time" },
  { name: "李华", date: "2022-05-02", status: "present", department: "tech", type: "contractor" },
  { name: "小明", date: "2023-05-02", status: "absent", department: "hr", type: "full-time" },
  { name: "小张", date: "2023-05-02", status: "present", department: "tech", type: "full-time" },
  { name: "小李", date: "2023-05-02", status: "present", department: "hr", type: "contractor" },
  { name: "花花", date: "2012-05-02", status: "absent", department: "tech", type: "full-time" },
  { name: "晓晓", date: "2023-05-02", status: "present", department: "hr", type: "full-time" },
  { name: "小昭", date: "2016-05-02", status: "absent", department: "tech", type: "contractor" },
  { name: "aa", date: "2019-05-02", status: "present", department: "hr", type: "full-time" },
  { name: "bb", date: "2008-08-02", status: "absent", department: "tech", type: "contractor" },
  { name: "cc", date: "2008-06-12", status: "absent", department: "tech", type: "contractor" },
  // 更多数据...
]);

const statuses = ref([
  { label: '在勤', value: 'present' },
  { label: '缺席', value: 'absent' },
]);

const departments = ref([
  { label: '技术部', value: 'tech' },
  { label: '人事部', value: 'hr' },
]);

const types = ref([
  { label: '正式员工', value: 'full-time' },
  { label: '合同工', value: 'contractor' },
]);

const searchQuery = ref('');
const searchDate = ref('');
const searchStatus = ref('all');
const searchDepartment = ref('all');
const searchType = ref('all');

const filteredData = computed(() => {
  return data.value.filter(item => {
    return (searchQuery.value ? item.name.includes(searchQuery.value) : true)
        && (searchDate.value ? item.date === searchDate.value : true)
        && (searchStatus.value !== 'all' ? item.status === searchStatus.value : true)
        && (searchDepartment.value !== 'all' ? item.department === searchDepartment.value : true)
        && (searchType.value !== 'all' ? item.type === searchType.value : true);
  });
});

const fetchData = async () => {
  console.log('查询条件:', { searchQuery: searchQuery.value, searchDate: searchDate.value, searchStatus: searchStatus.value, searchDepartment: searchDepartment.value, searchType: searchType.value });
};

const exportToExcel = () => {
  const ws = XLSX.utils.json_to_sheet(filteredData.value);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, '出勤统计');

  const timestamp = new Date().getTime();
  const filename = `出勤_${timestamp}.xlsx`;

  XLSX.writeFile(wb, filename);
};
</script>
<template>
  <div class="attendance-summary">
    <el-form inline>
      <el-form-item label="姓名">
        <el-input v-model="searchQuery" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker v-model="searchDate" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchStatus" placeholder="请选择状态">
          <el-option label="全部" value="all"></el-option>
          <el-option v-for="status in statuses" :key="status.value" :label="status.label" :value="status.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门">
        <el-select v-model="searchDepartment" placeholder="请选择部门">
          <el-option label="全部" value="all"></el-option>
          <el-option v-for="department in departments" :key="department.value" :label="department.label" :value="department.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="人员类型">
        <el-select v-model="searchType" placeholder="请选择人员类型">
          <el-option label="全部" value="all"></el-option>
          <el-option v-for="type in types" :key="type.value" :label="type.label" :value="type.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
        <el-button type="success" @click="exportToExcel">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="filteredData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column prop="department" label="部门"></el-table-column>
      <el-table-column prop="type" label="人员类型"></el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.attendance-summary {
  padding: 20px;
}

.el-form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust based on the number of items per row */
  gap: 10px;
}

.el-form-item {
  margin-bottom: 10px;
}

.el-table {
  margin-top: 20px;
}
</style>